<template>
  <div class="register">

    <div class="zhucebiao">
      <div class="box">
        <h2 style="margin-top:30px;">注册页</h2>
      </div>
      <div class="box">
        <input type="text" v-model="modelData.username" placeholder="请输入手机号">
      </div>
      <div class="box">
        <input type="password" v-model="modelData.password" placeholder="输入密码">
      </div>
      <div class="box">
        <input type="password" v-model="modelData.passwordTwo" placeholder="确认密码">
      </div>
      <div class="box">
        <input type="button" value="注册" @click='biu'>
      </div>
    </div>
  </div>
</template>

<script>
import { user_register } from "../axios/api";
import { Toast } from 'vant';

export default {
  data() {
    return {
      modelData: { username: '', password: '', passwordTwo: '' },
    }
  },

  methods: {
    biu() {
      if (/^(?:(?:\+|00)86)?1\d{10}$/.test(this.modelData.username) == false) {
        Toast.fail('手机号格式错误！')
      } else if (this.modelData.password != this.modelData.passwordTwo) {
        Toast.fail('两次输入的密码不一致！')
      } else {
        let cope = JSON.parse(JSON.stringify(this.modelData));
        delete cope.passwordTwo;
        // console.log(cope);
        user_register({ phone: cope.username, pass: cope.password }).then(
          response => {
            //  console.log(response.data); 
            if (response.data.code == 200) {
              Toast('注册成功！');
              this.$router.push('/mylogin');
            } else {
              Toast.fail(response.data.msg)
            }
          }
        )
      }
    }
  },
}
</script>

<style lang='scss' scoped>
.register {
  width: 100%;
  height: 100%;
}
.zhucebiao {
  width: 100%;
  height: 100%;
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  input {
    width: 90%;
    height: 40px;
    border: 1px solid gray;
    margin: 40px 0;
    border-radius: 30px;
    outline: none;
    padding-left: 8px;
  }
}
</style>